<template>
  <view class='productSort'>
  <!--  <view class='header acea-row row-center-wrapper'>
		<navBar
		  :text="title"
		  :bacicon="'#fff'"
		  :background="bac"
		  :tit_c="'#fff'"
		></navBar>
      <view class='acea-row row-between-wrapper input'>
        <text class='iconfont icon-sousuo'></text>
        <input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search' name="search"
               placeholder-class='placeholder'></input>
      </view>
    </view> -->
    <view class='aside'>
      <scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;padding-bottom: 100rpx;">
        <view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'
              v-for="(item,index) in productList"
              :key="index" @click='tap(index,item)'>
          <text>{{ item.name }}</text>
        </view>
      </scroll-view>

    </view>
    <view class='conter'>
      <scroll-view scroll-y="true" :scroll-into-view="toView"
                   @scroll="scroll"
                   scroll-with-animation='true'>
        <block>

<!-- <view class='listw' :id="index"> -->
          <view class='listw' >
			<!-- {{productList[navActive].goodsList}} -->
            <!--            <view class='title acea-row row-center-wrapper left_wrapper'>-->
            <!--              <view class='line'></view>-->
            <!--              <view class='name'>{{ item.name }}</view>-->
            <!--              <view class='line'></view>-->
            <!--            </view>-->
            <view class='list acea-row right_wrapper'>
              <view class="content_wrapper" v-if="productList[navActive]&&productList[navActive].goodsList.length>0">
                <view class="child_wrapper" v-for="(f,i) in  productList[navActive].goodsList" :key="i" @click="childShopPing(f,i)">
                  <view class="left_">
                    <image :src="httpUrlFn(f.image)"></image>
                  </view>
                  <view class="right_">
					  <view class="item_1">
					    {{ f.name }}
					  </view>
                    <view class="item_1">
                      别名：{{ f.aliasName }}
                    </view>
					
                    <!-- <view class="item_2" v-if="f.CommissionToggle">
                      <view>佣金:
                        <text>￥{{ f.CommissionToggle }}</text>
                      </view>
                    </view> -->
                    <view class="item_3">
                      <view class="money_" v-if="f.adviseSalePrice">￥
                        <text>{{ f.adviseSalePrice }}</text>
						<text class="back_s">(含税价)</text> 
                      </view>
                      <view class="money_price" v-if="!f.adviseSalePrice" @tap.stop="gologin">点击查询</view>
                      <view class="number_">已售
                        <text>{{ f.sales }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="content_wrapper main_wrapper" v-if="productList[navActive]&&productList[navActive].goodsList.length===0"
                    style="display: flex;justify-content: center;align-items: center;"
              >
                <image src="/static/None/None_shopping.png"></image>
                <view>暂无商品喔~</view>
              </view>
            </view>
          </view>
        </block>
        <u-loadmore
            v-if="recordsList.length>0"
            :status="status"
            :icon-type="iconType"
            :load-text="loadText"
            @loadmore="loadNextFn"
        />
        <view :style='"height:"+(height-300)+"rpx;"' v-if="number<15"></view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
// import {
//   getCategoryList
// } from '@/api/store.js';
// import ClipboardJS from "@/plugin/clipboard/clipboard.js";
import {getTypeGoodsList} from "@/api/goods";
// import {getShopPing} from "@/api/shopping";
import {BASE_URL_IMAHE} from "../../../utils/https";
import navBar from "@/components/tarbarnav.vue";


export default {
	components: {
	  navBar,
	},
  data() {
    return {
      userInfoServer:'',
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      navlist: [],
      productList: [
		
	  ],
      navActive: 0,
      number: "",
      height: 0,
      hightArr: [],
      toView: "",
      tabbarH: 0,
      params: {
        current: 1,
        size: 10,
        categoryId: 1, //商品类型id
        channelId: 1, //商品分栏 1->普通商品；2->礼包；3->积分兑换
        prodName: '' //商品名称
      },
      indexTap: 0,
      recordsList: [],
      navbar: 0,
	  title: "商品分类",
	  bac: {
	    background: "#EF392E",
	  },
	  typegooddate:{
		  v:"",
		  userId:'',
		  goodsTypeId:"",
	  },
	  // selectproductList:0,
    }
  },
  onLoad(options) {
	
    
	
  },
  onShow() {
	  this.typegooddate.v=uni.getStorageSync("v")?uni.getStorageSync("v"):''
	  this.typegooddate.userId=uni.getStorageSync("userId")?uni.getStorageSync("userId"):''
	  this.getAllCategory();
    this.userInfoServer = uni.getStorageSync("userInfoServer");
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载");
    this.shopPingList()
  },
  methods: {
    //点击组件触发上拉加载
    loadNextFn() {
      console.log("点击组件触发上拉加载2123");
      this.shopPingList()
    },

    httpUrlFn(item) {
      return  BASE_URL_IMAHE + item;
    },
	gologin(){
		if (!uni.getStorageSync("userId")) {
		  // 弹窗告诉用户去登录
		  uni.showModal({
		    title: "温馨提示",
		    content: "此时此刻需要您登录喔~",
		    // showCancel: false,
		    confirmText: "去登录",
		    cancelText: "再逛会",
		    success: (res) => {
		      if (res.confirm) {
		        uni.navigateTo({
		          url: "/pages/empower/mp-weixin",
		        });
		      }
		      
		      
		    },
		  });
				return
		}
	},

    //商品点击
    childShopPing(item, index) {
		
      console.log(item, '商品')
      uni.navigateTo({
        url: `/pages/subpackage/goods/detail?goodsId=${item.id}&pic=${item.pic}&prodName=${item.prodName}&price=${item.price}&oriPrice=${item.oriPrice}&vrPayUsers=${item.vrPayUsers}&commission=${item.commission}&properties=${item.properties}&content=${encodeURIComponent(JSON.stringify(item.content))}&channelId=1&itemType=1`,
      });

    },


    infoScroll: function () {
      let that = this;
      // let len = that.productList.length;
      // console.log(len, 'len')
      // let child = that.productList[len - 1] && that.productList[len - 1].child ? that.productList[len - 1].child : [];
      // console.log(child, 'child')
      // this.number = child ? child.length : 0;

      //设置商品列表高度
      // uni.getSystemInfo({
      //   success: function (res) {
      //     console.log(res.windowHeight, 'res.windowHeight')
      //     that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
      //   },
      // });
      // let height = 0;
      // let hightArr = [];
      // for (let i = 0; i < len; i++) {
      //   //获取元素所在位置
      //   let query = uni.createSelectorQuery().in(this);
      //   let idView = "#b" + i;
      //   query.select(idView).boundingClientRect();
      //   query.exec(function (res) {
      //     let top = res[0].top;
      //     console.log(top, 'top')
      //     hightArr.push(top);
      //     that.hightArr = hightArr
      //   });
      // }
      // ;
    },
    tap: function (index,  item) {
      // console.log(index,  item, '分类id')
      // this.toView = id;
      this.navActive = index;
      this.indexTap = index
      this.params.categoryId = item.id
      this.params.current = 1
      this.params.size = 10
      this.recordsList = []
      this.shopPingList()
    },

    //请求商品详情列表
    async shopPingList() {
		return
      this.status = "loading";
      let that = this;

      const res = await getShopPing(this.params)
      if (res.code === 0) {
        that.recordsList.push(...res.data.records);

        this.recordsList.forEach((item) => {
          const CommissionToggle =
              this.userInfoServer.roleId === 1
                  ? item.uniteCommission
                  : this.userInfoServer.roleId === 2
                      ? item.partnerCommission
                      : this.userInfoServer.roleId === 3
                          ? item.facilitatorCommission
                          : this.userInfoServer.roleId === 4
                              ? item.shopkeeperCommission
                              : "";
          if (CommissionToggle) {
            item.CommissionToggle = CommissionToggle
          } else {
            item.CommissionToggle = '0'
          }
        });


        if (res.data.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.records.length >= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

        if (this.recordsList.length <= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
            res.data.records.length !== 0 &&
            res.data.records.length < this.params.size
        ) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }


        // setTimeout(function () {
        //   that.infoScroll();
        // }, 500)
      }

    },

    //商品分类
    async classification(id) {
      let that = this;
      // const res = await selProds()
	
      // console.log(res, '商品分类')
      
	  
	   const resTypeGoods = await getTypeGoodsList(JSON.stringify(this.typegooddate))
	   console.log("resTypeGoods",resTypeGoods)
	   if (resTypeGoods.result == 0) {
		    // console.log("resTypeGoods",resTypeGoods.goodsTypeList)
	     that.productList = resTypeGoods.goodsTypeList;
	     // if (!id) {
	     //   //第一次请求查询第一个分类的商品
	     //   that.params.categoryId = res.data[0].id
	     // } else {
	     //   that.params.categoryId = id
	     // }
	   
	     //请求商品详情列表
	     await this.shopPingList()
	   }
    },

    getAllCategory: async function () {
      let that = this;

      //请求商品分类
      await this.classification()

      // selProds().then(res => {
      //   that.productList = res.data;
      //   setTimeout(function(){
      //     that.infoScroll();
      //   },500)
      // })

      // setTimeout(function () {
      //   that.infoScroll();
      // }, 500)
    },
    scroll: function (e) {
      let scrollTop = e.detail.scrollTop;
      let scrollArr = this.hightArr;
      for (let i = 0; i < scrollArr.length; i++) {
        if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
          this.navActive = 0
        } else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[0]) {
          this.navActive = i
        } else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
          this.navActive = scrollArr.length - 1
        }
      }
    },
    searchSubmitValue: function (e) {
      console.log(e.detail.value, '搜索')
      if (this.$util.trim(e.detail.value).length > 0) {
        uni.navigateTo({
          url: '/pages/empower/goods_search/index?searchValue=' + e.detail.value
        })
      } else {
        return this.$util.Tips({
          title: '请填写要搜索的产品信息'
        });
      }
    },
  }
}
</script>

<style scoped lang="scss">
.productSort .header {
  width: 100%;
  height: rpx(48);
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  border-bottom: rpx(1) solid #f5f5f5;
}

.productSort .header .input {
  width: rpx(350);
  height: rpx(30);
  background-color: #f5f5f5;
  border-radius: rpx(25);
  box-sizing: border-box;
  padding: 0 rpx(12.5);
}

.productSort .header .input .iconfont {
  font-size: rpx(13);
  color: #555;
}

.productSort .header .input .placeholder {
  color: #999;
}

.productSort .header .input input {
  font-size: rpx(13);
  height: 100%;
  width: rpx(298.5);
}

.productSort .aside {
  position: fixed;
  width: rpx(90);
  left: 0;
  top: 0;
  background-color: #f7f7f7;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100vh;
  box-sizing: border-box;
  // border-bottom: 100rpx;
  // margin-top: rpx(48);
}

.productSort .aside .item {
  height: rpx(52);
  width: 100%;
  font-size: rpx(13);
  color: #888888;
  font-weight: 400;
  text-align: center;
}

.productSort .aside .item.on {
  //background-color: #fff;
  //border-left: rpx(2) solid #fc4141;
  //width: 100%;
  //color: #fc4141;
  //font-weight: bold;


  text-align: center;
  font-size: rpx(13);
  font-weight: bold;
  color: #353535;
  background: #FFFFFF;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: rpx(3);
    height: rpx(24);
    background: #FA5151;
  }
}

.productSort .conter {
  // margin: rpx(48) 0 0 rpx(90);
  margin: 0 0 0 rpx(90);
  padding: 0 rpx(7);
  background-color: #fff;
  min-height: calc(100vh - 52px);
}

.productSort .conter .listw {
  padding-top: rpx(10);
}

.productSort .conter .listw .title {
  height: rpx(45);
}

.productSort .conter .listw .title .line {
  width: rpx(50);
  height: rpx(1);
  background-color: #f0f0f0;
}

.productSort .conter .listw .title .name {
  font-size: rpx(14);
  color: #333;
  margin: 0 rpx(15);
  font-weight: bold;
}

.productSort .conter .list {
  flex-wrap: wrap;
}

.productSort .conter .list .item {
  width: rpx(88.5);
  margin-top: rpx(13);
  
}

.productSort .conter .list .item .picture {
  width: rpx(60);
  height: rpx(60);
  border-radius: 50%;
}

.productSort .conter .list .item .picture image {
  width: 100%;
  height: 100%;
  border-radius: 50%;

  div {
    background-color: #f7f7f7;
  }
}

.productSort .conter .list .item .name {
  font-size: rpx(12);
  color: #333;
  height: rpx(28);
  line-height: rpx(28);
  width: rpx(60);
  text-align: center;
}


view.left_wrapper {
  //background: red;
}

view.right_wrapper {
  //background: pink;
}

.content_wrapper.main_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: calc(100vh - 60px);

  > image {
    vertical-align: middle;
    width: rpx(222);
    height: rpx(158);
  }

  > view {
    font-size: rpx(13);
    font-weight: 400;
    color: #B2B2B2;
  }
}

.content_wrapper {
  width: 100%;
  padding: rpx(8) rpx(12);

  > .child_wrapper {
    display: flex;
    margin-bottom: rpx(12);
	border-bottom: rpx(1) solid #dddddd;

    > .left_ {
      margin-right: rpx(6);
      margin-bottom: rpx(10);
      > image {
        width: rpx(72);
        height: rpx(72);
        vertical-align: middle;
      }
    }

    > .right_ {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
	  margin-bottom: rpx(10);

      > .item_1 {
        margin-bottom: rpx(6);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; /*最大行数*/
      }

      > .item_2 {
        display: flex;
        margin-bottom: rpx(11);

        > view {
          font-size: rpx(10);
          font-weight: 400;
          color: #FA5151;
          background: rgba(250, 81, 81, 0.1);
          border-radius: rpx(2);
          border: rpx(1) solid #FA5151;
          padding: rpx(1) rpx(3);
        }
      }

      > .item_3 {
        display: flex;
        align-items: center;
        justify-content: space-between;

        > .money_ {
          font-size: rpx(10);
          font-weight: bold;
          color: #FA5151;
          margin-right: rpx(4);

          > text {
            font-size: rpx(15);
          }
		  .back_s{
			 font-size: rpx(10); 
			 color: #888888;
			 font-weight: normal;
		  }
        }

        > .money_price {
          margin-top: rpx(2);
          font-size: rpx(10);
          font-weight: 400;
          color: #B2B2B2;
          // text-decoration: line-through;
        }

        > .number_ {
          margin-left: auto;
          font-size: rpx(12);
          font-weight: 400;
          color: #888888;
        }
      }
    }
  }
}

</style>
